<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: #f5f7fa; padding: 20px;">
      <h3>绿植领养</h3>
      <el-menu router default-active="$route.path">
        <el-menu-item index="/dashboard"><span>仪表盘</span></el-menu-item>
        <el-menu-item index="/plants"><span>植物管理</span></el-menu-item>
        <el-menu-item index="/adoptions"><span>领养管理</span></el-menu-item>
        <el-menu-item index="/users"><span>用户管理</span></el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background-color: white; border-bottom: 1px solid #e4e7ed;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <h3 style="margin: 0;">{{ pageTitle }}</h3>
          <el-button size="small" @click="handleLogout">退出登录</el-button>
        </div>
      </el-header>
      <el-main style="padding: 20px;"><router-view /></el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const pageTitle = computed(() => {
  switch (route.path) {
    case '/dashboard': return '仪表盘';
    case '/plants': return '植物管理';
    case '/orders': return '订单管理';
    case '/users': return '用户管理';
    default: return '绿植领养系统';
  }
});

const handleLogout = () => {
  localStorage.removeItem('isLoggedIn');
  router.push('/login');
};
</script>
